import React, { ReactElement, useState, useRef, useEffect } from "react";
import { Button, Modal, Form, Input } from "antd";
import "./index.css";

interface IBtn {
  onSearch: Function;
  dataList: any[];
  addInfo: Function;
}
const { TextArea } = Input;
const layout = {
  labelCol: { span: 3 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: { offset: 3, span: 16 },
};
const validateMessages = {
  // eslint-disable-next-line no-template-curly-in-string
  required: "${label} 是必填的！",
};
const BtnSearch: React.FC<IBtn> = ({
  onSearch,
  dataList,
  addInfo,
}): ReactElement => {
  const inputRef = useRef<HTMLInputElement>(null);
  const [isModalVisible, setIsModalVisible] = useState(false);

  const [form] = Form.useForm();
  //搜索事件
  const btnClick = (): void => {
    const val: string = inputRef.current!.value.trim();
    console.log(val);
    const list = dataList.filter((item) => {
      return item.title.indexOf(val) > -1;
    });
    onSearch(list);
  };

  const onFinish = (values: any) => {
    values.time = new Date();
    addInfo(values);
    form.resetFields();
    setIsModalVisible(false);
  };
  const onFinishFailed = (values: any) => {
    console.log(values);
  };

  useEffect(() => {
    form.setFieldsValue({
      title: "Hello world!",
      content: "Hello world!",
    });
   
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const onReset = () => {
    form.resetFields();
  };

  return (
    <div className="btn_search">
      <input type="text" ref={inputRef} placeholder="请输入...." />
      <Button onClick={btnClick}>搜索</Button>
      <Button
        onClick={() => {
          setIsModalVisible(true);
        }}
        type="primary"
      >
        新增
      </Button>
      <Modal
        title="新增数据"
        onCancel={() => {
          setIsModalVisible(false);
        }}
        forceRender={true}
        footer={null}
        visible={isModalVisible}
      >
        <Form
          {...layout}
          form={form}
          name="control-hooks"
          validateMessages={validateMessages}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <Form.Item name="title" label="标题" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item
            name="email"
            label="邮箱"
            rules={[
              { required: true },
              {
                pattern:
                  /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
                message: "邮箱格式不正确",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item name="content" label="内容" rules={[{ required: true }]}>
            <TextArea rows={4} />
          </Form.Item>
          <Form.Item {...tailLayout}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
            <Button htmlType="button" onClick={onReset}>
              重置
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};
export default BtnSearch;
